<template>
    <view>
        <u-swiper :list="list1" height="260"></u-swiper>
        <!-- 价格 商品简介 -->
        <view class=" pd20 flex column card">
            <text class="fwb fs40">￥24.90</text>
            <text class="tipcol">西西里烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦</text>
            <view class="fs28 flex mgt20 aic">
                <u-icon name="map" color="#2979ff" size="18"></u-icon>山东青岛 包邮
                <text class="c9 mgl20 fs24">配送至 扬州 拉面 小草</text>
            </view>
            <view class="fs28 flex mgt20 aic">
                <view class="mgl10 tagList">
                    <u-tag text="七天无理由" plain size="mini" type="warning"></u-tag>
                    <u-tag text="花呗" plain size="mini" type="warning"></u-tag>
                    <u-tag text="信用卡支付" plain size="mini" type="warning"></u-tag>
                    <u-tag text="集分宝" plain size="mini" type="warning"></u-tag>
                </view>
            </view>

        </view>
        <!-- 类别 -->
        <view class="card mgt20">
            <view class="flex jcsb fs28">
                <view class="fwb">类别(4)</view>
                <view class="flex aic">更多<view><u-icon name="arrow-right" color="#2979ff" size="15"></u-icon></view>
                </view>
            </view>
            <view class="fs28 mgt20">
                <view><text class="fwb">a类</text> <text>描述:100斤</text></view>
                <view class="skuPic">
                    <image src="../../static/images/user.jpg" mode="aspectFill"></image>
                    <image src="../../static/images/user.jpg" mode="aspectFill"></image>
                    <image src="../../static/images/user.jpg" mode="aspectFill"></image>
                </view>
                <view><text class="fwb">b类</text> <text>描述:200斤</text></view>
                <view class="skuPic">
                    <image src="../../static/images/user.jpg" mode="aspectFill"></image>
                    <image src="../../static/images/user.jpg" mode="aspectFill"></image>

                </view>
                <view><text class="fwb">a类</text> <text>描述:300斤</text></view>
                <view class="skuPic">
                    <image src="../../static/images/user.jpg" mode="aspectFill"></image>
                </view>
            </view>
        </view>
        <!-- 商品评价 -->
        <view class="card mgt20">
            <view class="flex jcsb fs28">
                <view class="fwb">商品评价(200+)</view>
                <view class="flex aic">更多<view><u-icon name="arrow-right" color="#2979ff" size="15"></u-icon></view>
                </view>
            </view>
            <view class="mgt20 flex aic">
                <image src="../../static/images/user.jpg" mode="aspectFill" class="avatar "></image>
                <view class="textStyle">
                    <text class="c0 fwb">零食领域大神</text>
                    <text>广东省</text>
                    <text>2022-01-01</text>
                </view>
            </view>
            <view class="mgt10 fs28 txtint2 u-line-3">
                这个东西很好吃;这个东西很好吃这个东西;这个东西很好吃这个东;这个东西很好吃这个东;这个东西很好吃这个东;这个东西很好吃这个东很好吃这个东西很好吃这个东西很好吃这个东西很好吃这个东西很好吃这个东西很好吃这个东西很好吃
            </view>
        </view>
        <!-- 问大家 -->
        <view class="card mgt20">
            <view class="flex jcsb fs28">
                <view class="fwb">问大家(100+)</view>
                <view class="flex aic">更多<view><u-icon name="arrow-right" color="#2979ff" size="15"></u-icon></view>
                </view>
            </view>
            <view class="mgt20 flex aic">
                <image src="../../static/images/user.jpg" mode="aspectFill" class="avatar "></image>
                <view class="textStyle">
                    <text class="c0 fwb">零食领域大神</text>
                    <text>广东省</text>
                    <text>2022-01-01</text>
                </view>
            </view>
            <view class="mgt10 fs28 txtint2 u-line-3">
                好吃吗?
            </view>
        </view>
        <!-- 比价 -->
        <view class="card mgt20">
            <view class="flex jcsb fs28">
                <view class="fwb">比价</view>
                <view class="flex aic">更多<view><u-icon name="arrow-right" color="#2979ff" size="15"></u-icon></view>
                </view>
            </view>

        </view>

        <view class="bLan">
            <view class="flex aic jcsa w100">
                <view class="bottonView">
                    <view class="miniv" @click="topage('/pages/text/haha')">
                        <u-icon name="photo" color="#2979ff" size="20"></u-icon>店铺
                    </view>
                    <view class="miniv"><u-icon name="photo" color="#2979ff" size="20"></u-icon>收藏
                    </view>
                    <view class="miniv"><u-icon name="photo" color="#2979ff" size="20"></u-icon>客服
                    </view>
                </view>
                <view class="flex buyBtn">
                    <view class="left">立即购买</view>
                    <view class="right">添加购物车</view>
                </view>
            </view>
        </view>
    </view>
</template>
<script setup>
    const list1 = [
        'https://cdn.uviewui.com/uview/swiper/swiper1.png',
        'https://cdn.uviewui.com/uview/swiper/swiper2.png',
        'https://cdn.uviewui.com/uview/swiper/swiper3.png',
    ];

    function topage(url) {
        console.log(url);
        uni.navigateTo({
            url
        })
    }
</script>
<style lang="scss">
    page {
        background-color: $uni-bg-color-grey;
    }
</style>
<style lang="scss" scoped>
    .tipcol {
        font-size: 26rpx;
        margin-top: 10rpx;
        font-weight: bold;
    }

    .tagList {
        view {
            margin-right: 10rpx;
        }
    }

    .card {
        border-radius: 10rpx;
        background-color: #fff;
        padding: 25rpx;

        .textStyle {
            font-size: 26rpx;
            color: #999;

            text {
                margin-left: 20rpx;

            }
        }

        .skuPic {
            image {

                width: 200rpx;
                height: 200rpx;
                margin: 10rpx;
                border-radius: 20rpx;
            }
        }
    }

    .bLan {
        background-color: red;

        .bottonView {
            display: flex;
            font-size: 24rpx;

            // flex column aic mgr40
            .miniv {
                display: flex;
                flex-direction: column;
                justify-content: center;
                padding: 5rpx 20rpx;
                margin-right: 20rpx;
            }
        }

        .buyBtn {
            .btn {
                padding: 16rpx;
                font-size: 26rpx;
                color: #fff;
            }

            .left {
                @extend .btn;
                border-radius: 20rpx 0 0 20rpx;
                background-color: skyblue;
            }

            .right {
                @extend .btn;
                border-radius: 0 20rpx 20rpx 0;
                background-color: red;
            }
        }
    }
</style>